<script setup lang="ts">
import { reactive } from 'vue';
import { Greet } from '../../wailsjs/go/handler/HandlerGreet';
import { useMessage, TabsProps } from 'naive-ui';
import { ref } from 'vue';

const placement = ref<NonNullable<TabsProps['placement']>>('left')
const type = ref<TabsProps['type']>('card')

const message = useMessage()

const data = reactive({
  name: "",
  resultText: "Please enter your name below 👇",
})

function greet() {
  Greet(data.name).then(result => {
    message.info(result)
  })
}


</script>

<template>
  <main>
    <n-tabs :key="type + placement" addable :type="type" animated :placement="placement" :style="placement === 'left' || placement === 'right'
      ? { height: '240px' }
      : undefined
      ">
      <template #prefix>
        Prefix
      </template>
      <template #suffix>
        Suffix
      </template>
      <n-tab-pane name="oasis" tab="Oasis">
        <div class="result">{{ data.resultText }}</div>
        <div class="input-box">
          <n-input v-model:value="data.name" type="text" placeholder="input name" class="input" />
          <n-button type="info" @click="greet"> Greet </n-button>
        </div>
      </n-tab-pane>
      <n-tab-pane name="the beatles" tab="the Beatles">
        Hey Jude
      </n-tab-pane>
      <n-tab-pane name="jay chou" tab="Jay Chou">
        Qilixiang
      </n-tab-pane>
      <n-tab-pane name="oasis1" tab="Oasis1">
        Wonderwall
      </n-tab-pane>
    </n-tabs>
  </main>
</template>

<style scoped>
.result {
  height: 20px;
  line-height: 20px;
  margin: 1.5rem auto;
}

.input-box {
  text-align: center;
}

.input {
  width: 200px;
  margin-right: 10px;
}
</style>
